<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>查看任务进度</title>
  <link rel="stylesheet" href="/static/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 5px;">
    <legend>查看任务信息</legend>
<form class="layui-form" action="addnewtasks">
  <div class="layui-form-item">
    <label class="layui-form-label">目标URL</label>
    <div class="layui-form-mid layui-word-aux">http://testphp.vulnweb.com</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">扫描速度</label>
    <div class="layui-form-mid layui-word-aux">慢速</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">检测插件</label>
    <div class="layui-input-block">
      <input type="checkbox" name="middle" title="中间件漏洞" disabled="disabled" checked>
      <input type="checkbox" name="sqli" title="SQL注入" disabled="disabled" checked>
      <input type="checkbox" name="xss" title="跨站脚本执行" disabled="disabled" checked>
      <input type="checkbox" name="cmdi" title="命令执行" disabled="disabled" checked>
      <input type="checkbox" name="struts2-045" title="struts2-045" disabled="disabled" checked>
      <input type="checkbox" name="struts2-052" title="struts2-052" disabled="disabled" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">任务描述</label>
    <div class="layui-form-mid layui-word-aux">该任务是测试用例</div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">创建时间</label>
    <div class="layui-form-mid layui-word-aux">2019-01-12 12:07:00</div>
  </div>
  <div class="layui-form-item layui-form-text" style="margin-top: 15px; width:300px">
    <label class="layui-form-label">任务进度</label>
    <div class="layui-input-block" style="padding-top:10px;">
      <div class="layui-progress layui-progress-big" lay-showpercent="true">
        <div class="layui-progress-bar" lay-percent="70%"></div>
      </div>
    </div>
  </div>
</form>
</fieldset>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>检测结果：</legend>
</fieldset>
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站基本信息</li>
    <li>whois信息</li>
    <li>端口信息</li>
    <li>子域名信息</li>
    <li>威胁情报</li>
    <li>漏洞检测结果</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <p>Header信息:</p><br>
      {% for key,value in data.items %}
      <p>{{ key }}:{{ value }}</p><br>
      {% endfor %}
    </div>
    <div class="layui-tab-item">
      <p>whois信息:</p><br>
      {% for key,value in whoisinfo.items %}
      <p>{{ key }}:{{ value }}</p><br>
      {% endfor %}
    </div>
    <div class="layui-tab-item">端口信息</div>
    <div class="layui-tab-item">子域名信息</div>
    <div class="layui-tab-item">威胁情报</div>
    <div class="layui-tab-item">
    <table class="layui-hide" id="tabletest"></table>
    </div>
  </div>
</div>
<script src="static/layui.js"></script>
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

  //触发事件
  var active = {
    tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };

  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });

  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);

  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });

});
</script>
<script>
  layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#tabletest'
    ,cols: [[
       {field: 'id', title: 'ID',sort: true,align: 'center',width:120}
      ,{field: 'category', title: '漏洞类型',align: 'center',width:120}
      ,{field: 'target_url', title: '目标URL',align: 'center',width:300}
      ,{field: 'level', title: '漏洞等级',align: 'center',width:120}
      ,{field: 'username', title: '任务归属人', align: 'center',width:120}
      ,{field: 'datetime', title: '检测时间', align: 'center',width:150}
      ,{field: 'status', title: '修复状态',align: 'center',width:120}
      ,{field: 'desc', title: '查看详情',align: 'center',width:120}
    ]]
    ,data: [
            {
               "id": "10001"
              ,"category": "命令注入"
              ,"target_url": "http://testphp.vulnweb.com/test1.php?id=1"
              ,"level": "高危"
              ,"username": "zsdlove"
              ,"datetime": "2019-01-12 12:07:00"
              ,"status": "<font color='red'>未修复</font>"
              ,"desc": "<a href=''><font color='green'>详情</font></a>"
            },
            {
               "id": "10002"
              ,"category": "XSS注入"
              ,"target_url": "http://testphp.vulnweb.com/test1.php?id=1"
              ,"level": "高危"
              ,"username": "zsdlove"
              ,"datetime": "2019-01-12 12:07:00"
              ,"status": "<font color='red'>未修复</font>"
              ,"desc": "<a href=''><font color='green'>详情</font></a>"
            },
            {
               "id": "10003"
              ,"category": "SQL注入"
              ,"target_url": "http://testphp.vulnweb.com/test1.php?id=1"
              ,"level": "高危"
              ,"username": "zsdlove"
              ,"datetime": "2019-01-12 12:07:00"
              ,"status": "<font color='green'>已修复</font>"
              ,"desc": "<a href=''><font color='green'>详情</font></a>"
            },
          ]
        });
    });
</script>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;

      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);

      othis.addClass(DISABLED);
    }
  };

  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</body>
</html>